<template>
    <view class="index-nav-container">
        <block v-for="(item, index) in resdata" :key="index">
            <view class="index-nav-item" @click="event(item)">
                <!-- 图标 -->
                <image :src="item.src" 
                    style="width: 80rpx; height: 80rpx;" 
                    mode="aspectFit"></image> 
                <!-- 文字 -->
                <text class="font-md mt-2">{{ item.text }}</text> 
            </view>
        </block>
    </view>
</template>

<script>
    export default {
        props: {
            resdata: Array // 传递数据的类型
        },
        methods: {
            event(item) {
                console.log("点击了图标", item); // 输出点击的图标信息
            }
        }
    }
</script>

<style scoped>
    /* 首页分类容器 */
    .index-nav-container {
        display: flex;
        flex-wrap: wrap; /* 允许换行 */
        justify-content: space-between; /* 每行均匀分布 */
    }

    /* 每个图标项的样式 */
    .index-nav-item {
        width: 33.33%; /* 每个图标占一行的三分之一宽度 */
        text-align: center;
        padding: 10rpx 0; /* 上下间距 */
        margin-bottom: 20rpx; /* 行间距 */
        display: flex; 
        flex-direction: column; /* 设置为垂直排列 */
        align-items: center; /* 水平居中对齐 */
        justify-content: center; /* 垂直居中对齐 */
    }

    .font-md {
        font-size: 28rpx; /* 调整文字的大小 */
    }

    .mt-2 {
        margin-top: 12rpx; /* 图标与文字之间的间距 */
    }
</style>
